<template>
  <div class="mod-demo-ueditor">
    <el-alert
      title="提示："
      type="warning"
      :closable="false">
      <p class="el-alert__description">文件ID为：{{addNotesForm.fileId}}</p>
      <p class="el-alert__description">文件名为：{{addNotesForm.fileName}}</p>
    </el-alert>
    <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">{{addNotesForm.content}}</script>
        
    <!-- 获取内容 -->
    <p><el-button @click="submit()" type="primary" size="max">保存笔记</el-button></p>
  </div>
</template>

<script>
  import ueditor from 'ueditor'
  export default {
    data () {
      return {
        addNotesForm: {
          fileId: '',
          fileName: '',
          content: '请填写笔记'
        },
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: '',
        dialogVisible: false
      }
    },
    mounted () {
      let uploadUrl = this.$http.adornUrl(`/oss/upload?token=${this.$cookie.get('token')}`);

      this.ue = ueditor.getEditor(this.ueId, {
        serverUrl: uploadUrl, // 服务器统一请求接口路径
        zIndex: 3000
      })
    },
    created () {
      let files=this.$route.query['row']
      this.addNotesForm.fileId = files.id
      this.addNotesForm.fileName = files.fileName
    },
    methods: {
      submit () {
        this.getContent()
        if(!this.addNotesForm.fileId){
          this.$message.error("上传失败")
          return
        }
        
        this.$http({
          url: this.$http.adornUrl('/filenote/insert/'),
          method: 'post',
          data: this.$http.adornData(this.addNotesForm)
        }).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.addNotesForm.content = '请填写笔记'
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      getContent () {
        this.ue.ready(() => {
          this.addNotesForm.content = this.ue.getContent()
        })
      }
    }
  }
</script>

<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
